<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 1.事件调用的方法没有参数 -->
			<button type="button" @click="btn1Click()">按钮一</button>
			<button type="button" @click="btn1Click">按钮一</button>
			<!-- 在事件定义时，写函数时省略了小括号，但是方法本身是需要一个参数的，这个时候，
			vue会默认将浏览器生成的event事件对象作为参数传入到方法中-->
			<button type="button" @click="btn2Click(123)">按钮二</button>
			<button type="button" @click="btn2Click()">按钮二</button>
			<button type="button" @click="btn2Click">按钮二</button>
			<!-- 方法定义时，我们需要event对象，同时又需要其他参数 -->
			<!-- 在调用方式，如何手动的获取到浏览器参数的event对象：$event -->
			<button type="button"  @click="btn3Click('123',$event)">按钮三</button>
			<button type="button">按钮四</button>
			
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app=new Vue({
				el:'#app',
				data:{
					message:'你好'
				},
				methods:{
					btn1Click(){
						console.log('btn1Click');
					},
					btn2Click(event){
						console.log('-------',event);
					},
					btn3Click(abc,event){
						console.log('++++',abc,event);
					}
				}
			})
			//如果函数需要参数，但是没有传入，那么函数的形参为undefined
			// function abc(name){
			// 	console.log(name);
			// }
			// abc();
		</script>
	</body>
</html>
